<template>
    <!-- svg:图标外层容器节点，内部需要与use标签结合使用 -->
    <svg :style="{ width, height }">
        <!-- xlink：href执行用哪一个图标，属性值务必为#icon-图标名字 -->
        <!-- fill属性可以设置图标的颜色，但是有些svg不能设置，如果要设置需要渠道svg中找到fill字段删除 -->
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>
<script setup lang='ts'>
//接收父组件传递过来的参数
defineProps({
    //xlink:href属性值的前缀
    prefix: {
        type: String,
        default: '#icon-'
    },
    //提供使用的图标名字
    name: String,
    //接收父组件传递颜色
    color: {
        type: String,
        default: ''
    },
    //接收父组件传递过来的宽度高度
    width: {
        type: String,
        default: '16px'
    },
    height: {
        type: String,
        default: '16px'
    },
})
</script>

<style></style>